<template>
  <div class="index" :style="{'padding-top':navigationHeight + 'px'}">
		<u-navbar title="分享海报"></u-navbar>
    <image :src="imgUrl" style="width: 702upx; height: 712upx" />
    <div style="position: fixed; top: 999999999999999999999upx">
      <!-- #ifdef MP-WEIXIN -->
      <canvas id="canvas" type="2d" style="width: 702px; height: 712px" />
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <canvas id="canvas" canvas-id="canvas" style="width: 702px; height: 712px" />
      <!-- #endif -->
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { useDrawPoster } from '@/js_sdk/u-draw-poster'
  const headImgUrl = '../../static/share/tx.png'
  const codeImgUrl = '../../static/share/code.png'
  export default {
    data: () => ({
      imgUrl: '',
			navigationHeight:0
    }),
		onLoad() {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					// console.log(e);
					if(e.platform == "ios" || e.platform == "devtools"){
						_that.navigationHeight = e.statusBarHeight +45;
					}else{
						_that.navigationHeight = e.statusBarHeight + 50;
					}
				}
			})
		},
    async onReady() {
      // 创建绘制工具
      const dp = await useDrawPoster({
        selector: 'canvas',
        loading: true,
        debugging: true,
        width: 702,
        height: 712
      })
      const w = dp.canvas.width
      const h = dp.canvas.height
      // 绘制基本背景
      dp.draw((ctx) => {
        ctx.fillStyle = '#FFAC3F'
        ctx.fillRoundRect(0, 0, w, h, 12)
        ctx.clip()
        ctx.fillStyle = '#ffffff'
        ctx.fillRoundRect(24, 96, 654, 464, 12)
				ctx.fillStyle = '#ffffff'
				ctx.fillRect(582, 584, 96, 96)
				ctx.fillStyle = '#000'
				ctx.fillRoundRect(48, 292, 48, 24, 4)
				ctx.fillStyle = '#F5F5F5'
				ctx.fillRect(24, 340, 654, 2)
        // ctx.fillStyle = '#ffffff'
        // ctx.textAlign = 'center'
        // ctx.font = 'bold 32px PingFang SC'
        // ctx.fillText(' 分享海报 ', w / 2, 50)
      })
      // 绘制图片内容
      dp.draw(async (ctx) => {
        await Promise.all([
          ctx.drawImage('/static/share/logo1.png', 20, 20, 35, 35),
          ctx.drawImage('/static/share/fans.png', 60, 292, 24, 24),
        ])
        // 用户二维码
        await ctx.drawRoundImage(codeImgUrl, 590, 592, 80, 80)
				await ctx.drawRoundImage('/static/share/bg.jpeg', 48, 456, 72, 72, 100)
        // 用户头像
        await ctx.drawRoundImage(headImgUrl, 24, 590, 90, 90, 100)
      })
      // 绘制中间文字内容
      dp.draw((ctx) => {
        ctx.fillStyle = '#333333'
        ctx.font = 'bold 36px Source Han Sans CN'
        ctx.fillText('瑞幸杨枝甘露系列新品推广', 48, 160)
				ctx.font = '400 28px Source Han Sans CN'
				ctx.fillText('数量：10份', 48, 210)
				ctx.fillStyle = '#FFAC3F'
				ctx.font = 'bold 28px Source Han Sans CN'
				ctx.fillText('￥100', 576, 210)
				ctx.fillStyle = '#333333'
				ctx.font = '400 28px Source Han Sans CN'
				ctx.fillText('领域：美食', 48, 260)
				ctx.font = '400 24px Source Han Sans CN'
				ctx.fillText('粉丝数500以上;等级10以上', 112, 310)
				ctx.font = '500 28px Source Han Sans CN'
				ctx.fillText('提供套餐', 48, 385)
				ctx.font = '400 24px Source Han Sans CN'
				ctx.fillText('99元三人火锅套餐', 184, 385)
				ctx.font = '400 24px Source Han Sans CN'
				ctx.fillText('瑞幸咖啡', 132, 500)
        // ctx.font = '28px PingFang SC'
        // ctx.fillWarpText({
        //   content:
        //     '当你觉得晚了的时候，恰恰是开始的时候，未来可期、前程似锦、一路向前吧。dddddddddddddd',
        //   maxWidth: 527,
        //   x: 81,
        //   y: 700,
        //   layer: 2
        // })
      })
      // 绘制底部文字内容
      dp.draw((ctx) => {
        ctx.fillStyle = '#fff'
        ctx.font = '28px PingFang SC'
        ctx.fillText('叽叽喳喳', 145, 820)
        ctx.font = '28px Source Han Sans CN'
        ctx.fillText('邀请您一起聆听声音', 130, 645)
        ctx.font = '18px PingFang SC'
        ctx.fillText('扫码聆听', 595, 700)
      })
      this.imgUrl = await dp.createImagePath()
    }
  }
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
  page,
  .index {
    height: 100%;
  }
  .index {
    position: relative;
    text-align: center;
    background: rgba($color: grey, $alpha: 0.2);
		height: calc(100vh - 88upx);
		padding-top: 100upx;
  }
  image {
    margin-top: 30rpx;
  }
</style>
